class Project{
    constructor(){

        this.tbody = document.querySelector("tbody");
        this.url = "http://localhost:3000/api";

        this.submit = document.getElementById("submit");
        this.stuName = document.getElementById("stuName");
        this.tel = document.getElementById("tel");
        this.result = document.getElementById("result");
        this.add = document.getElementById("add");

        // 提前设定，提交按钮的功能状态，0为添加，1为修改，默认为0
        this.type = 0;

        // 。。。
        // S1. 执行ajax请求
        this.seleteLoad();

        // 添加事件
        this.addEvent();
    }
    addEvent(){
        const that = this;
        // 点击添加按钮
        this.add.addEventListener("click",function(){
            // 保证输入框内容为空
            that.stuName.value = that.tel.value = that.result.value = "";
            // 修改将来提交按钮的功能状态，为0
            that.type = 0;
        })
        // 事件委托，点击修改按钮
        this.tbody.addEventListener("click",function(eve){
            const e = eve || window.event;
            const target = e.target || e.srcElement;
            if(target.getAttribute("my_name") === "set"){
                // 获取当前数据，并填充到表单
                const atd = target.parentNode.parentNode.children;
                that.stuName.value = atd[1].innerHTML;
                that.tel.value = atd[2].innerHTML;
                that.result.value = atd[3].innerHTML;
                // 获取当前数据对应的id，准备发送给后端
                that.id = target.parentNode.getAttribute("my_id");
                console.log(that.id)
                // 修改将来提交按钮的功能状态，为1
                that.type = 1;
            }
            if(target.getAttribute("my_name") === "del"){
                // 获取当前数据，并填充到表单
                that.id = target.parentNode.getAttribute("my_id");
                console.log(that.id);
                // that.type = 2;
                that.delLodad();
            }
        })
        this.submit.addEventListener("click",function(){
            that.s = that.stuName.value;
            that.t = that.tel.value;
            that.r = that.result.value;
    
            if(that.type === 0){
                // I1. 添加数据的ajax请求
                that.insertLoad();
                // console.log("添加功能")
            }else{
                that.updateLoad();
            }
        })
    }
    delLodad(){
        ajax({
            url:this.url,
            data:{
                type:"remove",
                id:this.id
            },
            success:res=>{
                res = JSON.parse(res)
                // console.log(res);
                // U2. 修改成功，解析数据
                if(res.code === 1){
                    this.data = res.data;
                    console.log(this.data);
                    // U3. 根据数据，渲染页面结构
                    this.render();
                }
            }
        })

    }
    updateLoad(){
        // 开启修改的ajax请求
        ajax({
            url:this.url,
            data:{
                type:"update",
                stuName:this.s,
                tel:this.t,
                result:this.r,
                id:this.id
            },
            success:res=>{
                res = JSON.parse(res)
                // console.log(res);
                // U2. 修改成功，解析数据
                if(res.code === 1){
                    this.data = res.data;
                    console.log(this.data);
                    // U3. 根据数据，渲染页面结构
                    this.render();
                }
            }
        })
    }
    insertLoad(){
        // 开启添加的ajax请求
        ajax({
            url:this.url,
            data:{
                type:"insert",
                stuName:this.s,
                tel:this.t,
                result:this.r
            },
            success:res=>{
                res = JSON.parse(res)
                // console.log(res);
                // I2. 插入成功，解析数据
                if(res.code === 1){
                    this.data = res.data;
                    // console.log(this.data);
                    // I3. 根据数据，渲染页面结构
                    this.render();
                }
            }
        })
    }
    seleteLoad(){
        // 开启查询的ajax请求
        ajax({
            url:this.url,
            data:{
                type:"select"
            },
            success:res=>{
                res = JSON.parse(res)
                // S2. 请求成功，解析数据
                if(res.code === 1){
                    this.data = res.data;
                    // console.log(this.data);
                    // S3. 根据数据，渲染页面结构
                    this.render();
                }
            }
        })
    }
    render(){
        console.log(this.data[0]);
        let str = "";
        for(let i=0;i<this.data.length;i++){
            str += `<tr>
                        <td>${i+1}</td>
                        <td>${this.data[i].stuName}</td>
                        <td>${this.data[i].tel}</td>
                        <td>${this.data[i].result}</td>
                        <td my_id="${this.data[i].id}">
                            <span class="btn btn-danger" my_name="del">删除</span>
                            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" my_name="set">修改</button>
                        </td>
                    </tr>`
        }
        this.tbody.innerHTML = str;
    }
}


new Project();